<template>
  <div class="count-wrapper">
    <div ref="countDom" style="width: 10px;height: 30px;background: red;"></div>
  </div>
</template>

<script>
// 请求动画帧动画
// requestAnimationFrame()
// three.js 递归调用 自己调用自己 循环
//  while(true) {    //  终止条件 }

// vue-countto  start end auto
export default {
  data() {
    return {
      num: 0,
    };
  },
  mounted() {
    this.getAnimate();
  },
  methods: {
    init() {
      //
    },
    getAnimate() {
      const countDom = this.$refs.countDom;
      this.num++;
      if (this.num >= 100) {
        return;
      }
      countDom.style.width = this.num + "px";
      requestAnimationFrame(this.getAnimate);
    },
  },
};
</script>

<style>
</style>